<!--
 * @Descripttion: 
 * @version: 
 * @Author: Xugang
 * @Date: 2022-04-15 17:00:04
 * @LastEditors: Xugang
 * @LastEditTime: 2022-04-15 18:04:59
-->
<template>
  <div class="colorTable">
    <el-table :data="tableData" style="width: 100%" :row-style="cellStyle">
      <el-table-column
        v-for="(column, index) in tableOption"
        :key="index"
        :prop="column.prop"
        :label="column.label"
        :width="column.width || ''"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="column.slotName">
            <slot
              v-bind:[column.slotName]="scope.row"
              :name="column.slotName"
            />
          </div>
          <div v-else>
            <span :style="{ color: column.color || '#333' }">{{
              scope.row[column.prop]
            }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableOption: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {};
  },

  created() {},

  methods: {
    cellStyle() {
      return {
        background: `url(${require("./table.png")}) no-repeat`,
        backgroundSize: "100% 100%",
        backgroundPosition: "center center",
        backgroundColor: "transparent",
      };
    },
  },
};
</script>

<style scoped lang='less'>
.colorTable {
  width: 100%;
  height: 100%;
}
.el-table {
  background-color: transparent;
}
.el-table::before {
  height: 0;
}
/deep/.el-table tr,
/deep/ .el-table th {
  background-color: transparent !important;
}
/deep/.el-table th.is-leaf {
  border-bottom: unset !important;
}
/deep/.el-table td {
  border-bottom: unset !important;
}
</style>
